<template>
    <div class="seller-center">
        <h2>卖家中心</h2>
        <el-row :gutter="20">
            <!-- 统计卡片 -->
            <el-col :span="6" v-for="stat in statistics" :key="stat.title">
                <el-card class="stat-card">
                    <div class="stat-icon">
                        <el-icon>
                            <component :is="stat.icon" />
                        </el-icon>
                    </div>
                    <div class="stat-content">
                        <div class="stat-value">{{ stat.value }}</div>
                        <div class="stat-title">{{ stat.title }}</div>
                    </div>
                </el-card>
            </el-col>
        </el-row>

        <!-- 最近订单 -->
        <div class="section">
            <div class="section-header">
                <h3>最近订单</h3>
                <el-button type="text" @click="$router.push('/seller/orders')">查看全部</el-button>
            </div>
            <el-table :data="recentOrders" stripe>
                <el-table-column prop="id" label="订单号" width="180" />
                <el-table-column prop="product.name" label="商品名称" />
                <el-table-column prop="buyer.username" label="买家" width="120" />
                <el-table-column prop="amount" label="金额" width="120">
                    <template #default="{ row }">
                        ¥{{ row.amount }}
                    </template>
                </el-table-column>
                <el-table-column prop="status" label="状态" width="120">
                    <template #default="{ row }">
                        <el-tag :type="getStatusType(row.status)">{{ getStatusText(row.status) }}</el-tag>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <!-- 商品管理 -->
        <div class="section">
            <div class="section-header">
                <h3>商品管理</h3>
                <el-button type="text" @click="$router.push('/seller/products')">查看全部</el-button>
            </div>
            <el-table :data="recentProducts" stripe>
                <el-table-column prop="name" label="商品名称" />
                <el-table-column prop="price" label="价格" width="120">
                    <template #default="{ row }">
                        ¥{{ row.price }}
                    </template>
                </el-table-column>
                <el-table-column prop="stock" label="库存" width="120" />
                <el-table-column prop="status" label="状态" width="120">
                    <template #default="{ row }">
                        <el-tag :type="row.status === 'on_sale' ? 'success' : 'info'">
                            {{ row.status === 'on_sale' ? '在售' : '下架' }}
                        </el-tag>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import {
    ShoppingCart,
    Goods,
    Money,
    Star
} from '@element-plus/icons-vue'

// 统计数据
const statistics = ref([
    { title: '总订单数', value: 128, icon: ShoppingCart },
    { title: '在售商品', value: 45, icon: Goods },
    { title: '总收入', value: '¥12,580', icon: Money },
    { title: '好评率', value: '98%', icon: Star }
])

// 最近订单
const recentOrders = ref([
    {
        id: 'SO2024040701',
        product: { name: '二手笔记本电脑' },
        buyer: { username: '张三' },
        amount: 2999,
        status: 'pending'
    },
    // ... 更多订单数据
])

// 最近商品
const recentProducts = ref([
    {
        name: '二手笔记本电脑',
        price: 2999,
        stock: 1,
        status: 'on_sale'
    },
    // ... 更多商品数据
])

// 获取订单状态类型
const getStatusType = (status: string) => {
    const types = {
        pending: 'warning',
        processing: 'primary',
        shipped: 'info',
        completed: 'success',
        cancelled: 'danger'
    }
    return types[status] || 'info'
}

// 获取订单状态文本
const getStatusText = (status: string) => {
    const texts = {
        pending: '待付款',
        processing: '待发货',
        shipped: '已发货',
        completed: '已完成',
        cancelled: '已取消'
    }
    return texts[status] || status
}
</script>

<style scoped>
.seller-center {
    padding: 20px;
}

h2 {
    margin-bottom: 20px;
    font-size: 24px;
    color: #333;
}

.stat-card {
    display: flex;
    align-items: center;
    padding: 20px;
    margin-bottom: 20px;
}

.stat-icon {
    font-size: 32px;
    margin-right: 16px;
    color: #409eff;
}

.stat-content {
    flex: 1;
}

.stat-value {
    font-size: 24px;
    font-weight: bold;
    color: #333;
    margin-bottom: 4px;
}

.stat-title {
    font-size: 14px;
    color: #666;
}

.section {
    margin-top: 30px;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

h3 {
    margin: 0;
    font-size: 18px;
    color: #333;
}
</style>